<!-- 取色器 -->
<template>
    <div class="color-picker">
        <div v-if="label" class="color-picker-label">
            {{ label }}
        </div>
        <div class="color-picker-content">
            <el-color-picker
                ref="colorPicker"
                :modelValue="modelValue"
                @update:modelValue="onUpdate"
                :show-alpha="showAlpha"
                :size="size"
                :predefine="predefineColors"
                @active-change="onActiveChange"
                v-bind="attrs"
            />
            <el-icon
                v-if="showDropper"
                title="取色"
                class="dropper-btn"
                @click="opOpenEyeDropper"
            >
                <icon-dropper />
            </el-icon>
        </div>
    </div>
</template>

<script>
import { defineComponent, toRefs, ref, watch } from 'vue'
import { useEyeDropper } from '@vueuse/core'
import { ElMessage } from 'element-plus'
export default defineComponent({
    name: 'ColorPicker',
    props: {
        modelValue: {
            type: [Number, String]
        },
        // 标题
        label: {
            type: String,
            default: ''
        },
        // 尺寸(large / default / small)
        size: {
            type: String,
            default: 'default'
        },
        // 是否支持透明度选择
        showAlpha: {
            type: Boolean,
            default: false
        },
        // 是否显示吸管/取色按钮
        showDropper: {
            type: Boolean,
            default: true
        }
    },
    emits: ['update:modelValue'],
    setup(props, { attrs, emit }) {
        const { modelValue, label, size, showAlpha, showDropper } = toRefs(props)

        const eyeDropper = useEyeDropper()
        
        const colorPicker = ref(null)
        let currentValue = modelValue.value

        // 预定义颜色
        const predefineColors = ref([
            '#ff4500',
            '#ff8c00',
            '#ffd700',
            '#90ee90',
            '#00ced1',
            '#1e90ff',
            '#c71585',
            'rgba(255, 69, 0, 0.68)',
            'rgb(255, 120, 0)',
            'hsv(51, 100, 98)',
            'hsva(120, 40, 94, 0.5)',
            'hsl(181, 100%, 37%)',
            'hsla(209, 100%, 56%, 0.73)',
            '#c7158577',
        ])

        watch(
            () => colorPicker.value?.showPicker,
            (newValue) => {
                if (!newValue && (currentValue !== modelValue.value)) {
                    onUpdate(currentValue)
                }
            }
        )

        const onUpdate = value => {
            currentValue = value
            emit('update:modelValue', value)
        }
        const onActiveChange = value => {
            emit('update:modelValue', value)
        }

        // 打开取色器
        const opOpenEyeDropper = () => {
            const message = ElMessage({
                message: '按【ESC】即可退出取色',
                grouping: true,
                type: 'info'
            })
            eyeDropper.open().then(data => {
                onUpdate(data.sRGBHex)
            }).catch(() => {
                message.close()
            })
        }

        return {
            attrs,
            modelValue,
            colorPicker,
            label,
            size,
            showAlpha,
            showDropper,
            predefineColors,
            eyeDropper,

            onUpdate,
            onActiveChange,
            opOpenEyeDropper
        }
    }
})
</script>

<style lang="less" scoped>
@import './color-picker.less';
</style>